<template>
	<Header></Header>
	<div class="box">
		<div class="search-box">
			<el-date-picker v-model="startDate" type="date" placeholder="开始日期" />
			<el-date-picker v-model="endDate" type="date" placeholder="结束日期" />
			<el-input clearable v-model="projectName" style="width: 240px" placeholder="项目名称" />
			<el-button type="primary" @click="search">查询</el-button>
		</div>

		<el-table :height="600" stripe :data="tableData" style="width: calc(100% - 40px)">
			<el-table-column label="保函状态" width="100">
				<template #default="scope">
					<el-tag :type="'success'" effect="dark">
						{{ changeStatus(scope.row.depositStatus) }}
					</el-tag>
				</template>
			</el-table-column>
			<el-table-column width="200" prop="contractorCreditCode" label="承建单位信用代码" />
			<el-table-column width="120" prop="contractorUnitName" label="承建单位名称" />
			<el-table-column width="200" prop="operatorId" label="申请人身份证号" />
			<el-table-column width="100" prop="operatorName" label="申请人名称" />
			<el-table-column width="150" prop="nameOfGeneralContractor" label="总承包企业名称" />
			<el-table-column width="200" prop="creditCodeOfGeneralContractor" label="总承包企业信用代码" />
			<el-table-column width="200" prop="startDate" label="保函开始日期" />
			<el-table-column width="200" prop="endDate" label="保函结束日期" />
			<el-table-column width="200" prop="projectName" label="项目名称" />
			<el-table-column width="200" prop="projectCode" label="项目编码" />
			<el-table-column width="200" prop="projectAmount" label="建筑工程项目金额" />
			<el-table-column width="200" prop="depositAmount" label="保函金额" />
			<el-table-column width="200" prop="contactPerson" label="总承包企业联系人" />
			<el-table-column width="200" prop="contactNumber" label="总承包企业联系人电话" />
			<el-table-column width="200" prop="createTime" label="创建时间" />
			<el-table-column width="200" prop="submitTime" label="提交时间" />
			<el-table-column width="200" prop="pushTime" label="推送时间" />
			<el-table-column width="200" prop="itemName" label="事项名称" />
			<el-table-column fixed="right" label="操作" min-width="120">
				<template #default="scope">
					<el-button link type="primary" size="small" @click="pull(scope.row)">推送</el-button>
				</template>
			</el-table-column>
		</el-table>
	</div>

	<el-dialog v-model="dialogVisible" title="推送" width="500">
		<span>保函ID：{{ dialogInfo.id }}</span
		><br />
		<span>保函编号：{{ dialogInfo.projectCode }}</span>
		<el-upload
			@change="handlerFileChange"
			class="upload-demo"
			:auto-upload="false"
			drag
			action=""
			:file-list="fileList"
			:limit="1"
			accept=".pdf"
			multiple
		>
			<el-icon class="el-icon--upload"><upload-filled /></el-icon>
			<div class="el-upload__text">Drop file here or <em>click to upload</em></div>
			<template #tip>
				<div class="el-upload__tip">仅可上传pdf文件</div>
			</template>
		</el-upload>
		<template #footer>
			<div class="dialog-footer">
				<el-button type="primary" @click="handlerPull"> 推送 </el-button>
			</div>
		</template>
	</el-dialog>
</template>

<script setup lang="ts">
	import Header from '@/components/header/index.component.vue'

	import { onMounted, ref } from 'vue'
	import { GetListDeposit, PullDeposit } from '@/api/listApi.ts'
	import { UploadFilled } from '@element-plus/icons-vue'
	import dayjs from 'dayjs'
	import { ElMessage } from 'element-plus'

	const dialogVisible = ref(false)
	const dialogInfo = ref(null)
	const fileList: any = ref([])
	const tableData = ref([])
	const startDate: any = ref('')
	const endDate: any = ref('')
	const projectName: any = ref('')

	const pull = (val: any) => {
		dialogVisible.value = true
		dialogInfo.value = val
	}
	const handlerFileChange = (file: any, fileListVal: any) => {
		fileList.value = fileListVal
	}
	const handlerPull = async () => {
		if (fileList.value.length == 0) {
			ElMessage({
				type: 'error',
				message: '请选择文件',
			})
			return
		}
		const file = fileList.value[0].raw
		let fd = new FormData()
		fd.append('uploadFile', file)
		const res = await PullDeposit(dialogInfo.value.id, dialogInfo.value.projectCode, fd)
		if (res.data.code == 200) {
			ElMessage({
				type: 'success',
				message: '推送成功',
			})
			dialogVisible.value = false
			getData()
		} else {
			ElMessage({
				type: 'error',
				message: res.data.message,
			})
		}
	}
	const search = async () => {
		const startTime: any =
			startDate.value == '' || startDate.value == null ? null : dayjs(startDate.value).format('YYYY-MM-DD')
		const endTime: any = endDate.value == '' || endDate.value == null ? null : dayjs(endDate.value).format('YYYY-MM-DD')
		const name = projectName.value == '' ? null : projectName.value
		const res = await GetListDeposit(startTime, endTime, name)
		tableData.value = res.data
	}
	const changeStatus = (val: number) => {
		switch (val) {
			case 0:
				return '初始化'
				break
			case 1:
				return '已提交'
				break
			case 2:
				return '已推送'
				break
			case 3:
				return '驳回'
				break
		}
	}

	const getData = async () => {
		const res = await GetListDeposit()
		tableData.value = res.data
	}
	onMounted(() => {
		getData()
	})
</script>

<style scoped lang="scss">
	.box {

		.search-box {
			display: flex;
			gap: 20px;
		}
	}
</style>
